<template>
  <div>
    <section class="msite">
      <!-- 首页头部 -->
      <header class="msite_header">
        <span class="header_search">
          <i class="iconfont icon-sousuo"></i>
        </span>
        <span class="header-title">
          <span class="header_title_text ellipsis">昌平区北七家宏福科技园（337省道北）</span>
        </span>
        <span class="header_login">
          <span class="header_login_text">登录|注册</span>
        </span>
      </header>
      <!-- 首页导航 -->
      <nav class="msite_nav">
        <div class="swiper-container">
          <div class="swiper-wrapper">
            <div class="swiper-slide">
              <a href="javascript:;" class="link_to_food">

              </a>
            </div>
          </div>
        </div>
      </nav>
      <!-- 首页附近商家 -->
      <div class="msite_shop_list">
        <div class="shop_header">
          <i class="iconfont icon-xuanxiang"></i>
          <span class="shop_header_title">附近商家</span>
        </div>
        <div class="shop_container">
          <ul class="shop_list">
            <li class="shop_li">
              <a href="">
                <div class="shop_left">
                  <img class="shop_img" src="./images/shop/1.jpg" alt="">
                </div>
                <div class="shop_right">
                  <section class="shop_detail_header"></section>
                </div>
              </a>
            </li>
          </ul>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
export default {
  name: "msite"
}
</script>

<style lang="stylus" rel="stylesheet/stylus">
    .header
      background-color #02a774
      position: fixed
      z-index 100
      left: 0
      top: 0
      width: 100%
      height: 45px
      .header_search
        position: absolute
        left: 15px
        top: 50%
        transform: translateY(-50%)
        width: 10%
        height: 50%
        .iconfont
          font-size: 22px
          color: #fff
      .header_title
        position: absolute
        top: 50%
        left: 50%
        transform: translate(-50%, -50%)
        width: 30%
        color: #fff
        font-size: 22px
        text-align: center
    &.msite
      width: 100%
      .msite_header
        background-color: #02a774
        position: fixed
        z-index 100
      .msite_nav
      .msite_shop_list
        top-border-1px(#e4e4e4)
        margin-top: 10px
        background-color: #fff
        .shop_header
          background-color #02a774
          position: fixed
          z-index 100
          left: 0
          top: 0
          width: 100%
          height: 45px
</style>